<template>
  <div class="content-block">
    <div class="info-head">{{ title }}</div>
    <div class="info-content padding">
      <el-table

        :data="lists"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
      >
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
          <template v-if="column.prop === 'area'" #default="{ row }">
            <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis(row, 'districtCode')">{{row.area}}</el-link>
          </template>
        </el-table-column>
      </el-table>
<!--      <el-pagination-->
<!--        class="pagination" layout="total,prev,pager,next"-->
<!--        hide-on-single-page background-->
<!--        :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize"-->
<!--        :total="pagination.total"-->
<!--        @current-change="getLists"-->
<!--      ></el-pagination>-->
    </div>
  </div>
</template>

<script>
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'

export default {
  name: 'grid-item-two',
  mixins: [Navigate2enterpriseAnalysis],
  props: {
    title: String
  },
  data () {
    return {
      loading: false,
      lists: [],
      columns: [
        { label: '区域', prop: 'area' },
        { label: '综合能源消费量控制目标（吨标准煤）', prop: 'comprehensive' },
        { label: '综合能源消费量实际发生（吨标准煤）', prop: 'comprehend' },
        { label: '强度控制目标（%）', prop: 'control' },
        { label: '强度实际发生（千克标准煤/万元）', prop: 'controlled' },
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 5,
        total: 0
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    districts () {
      return this.$store.getters['user/districts']
    },
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        resolve()
        this.pagination.total = 100
        this.loading = false
        this.lists = this.districts.map(v => ({
          id: v.code,
          area: v.name,
          comprehensive: '-',
          comprehend: '-',
          control: '-',
          controlled: '-',
        }))
      })
    }
  }
}
</script>

<style scoped>

</style>
